<!--
  @author: crissy-月下闲人
-->

<script lang="ts" setup>
import NewsCard from '@/components/NewsCard.vue'
import Floating from '@/components/Floating.vue'

const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <view class="page">
    <Floating class="floating"></Floating>
    <view :style="{ paddingTop: safeAreaInsets?.top + 'px' }" class="page-header">
      <view class="header-content"> </view>
    </view>
    <view class="page-content">
      <NewsCard class="card" v-for="i in 10">
        {{ i }}
      </NewsCard>
    </view>
  </view>
</template>

<style lang="scss" scoped>
$page-header-height: 450rpx;
$page-color: #ccc;
$page-content-color: #f2f8f7;

$bg-1: linear-gradient(-45deg, #f7f1ff 0%, #e7ffec 20%, #d1f9e7 39%, #bcd2e7 76%, #b8d0e5 100%);

.page {
  width: 100%;
  height: 100vh;
  background: $bg-1;
}
.floating {
  width: 100px;
  height: 100px;
}
.page-header {
  height: $page-header-height;

  .header-content {
    width: 100%;
    height: $page-header-height;
    display: flex;
    position: relative;
  }
}

.page-content {
  width: 100%;
  min-height: calc(100vh - $page-header-height);
  background-color: $page-content-color;
  border-top-right-radius: 50rpx;
  border-top-left-radius: 50rpx;
  z-index: 9;
  position: relative;
  padding: 55rpx 30rpx;

  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 100%;
  height: 300rpx;
  background: #fff;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
}
</style>
